<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-2">
        <div class="sticky" :style="'top: ' + topVal">
          <q-card flat>
            <q-card-section class="q-pa-none">
              <q-list bordered>
                <template v-if="isLogin">
                  <q-item
                    clickable
                    v-ripple
                    to="/?pTab=follow"
                    :active="route.fullPath == '/?pTab=follow'"
                  >
                    <q-item-section avatar>
                      <q-icon name="grade" />
                    </q-item-section>
                    <q-item-section>关注</q-item-section>
                  </q-item>
                  <q-separator />
                </template>
                <q-item
                  clickable
                  v-ripple
                  to="/"
                  :active="route.fullPath == '/'"
                >
                  <q-item-section avatar>
                    <q-icon name="pentagon" />
                  </q-item-section>
                  <q-item-section>综合</q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div class="col q-mx-sm">
        <q-tab-panels v-model="mainTab" animated>
          <q-tab-panel name="home" class="q-pa-none no-scroll">
            <HomePanel></HomePanel>
          </q-tab-panel>
          <q-tab-panel name="follow" class="q-pa-none no-scroll">
            <FollowPanel></FollowPanel>
          </q-tab-panel>
        </q-tab-panels>
      </div>
      <div class="col-3">
        <div><HotTopicCard></HotTopicCard></div>
        <div class="q-mt-sm"><HotUserCard></HotUserCard></div>
        <div class="q-mt-sm"><HotTagCard></HotTagCard></div>
        <div class="sticky q-pb-sm" :style="'top: ' + topVal">
          <div class="q-mt-sm"><HotArticleCard></HotArticleCard></div>
          <div class="q-mt-sm"><FooterComp></FooterComp></div>
        </div>
      </div>
    </div>
    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import FooterComp from 'src/components/FooterComp.vue';
import HotArticleCard from 'src/components/HotArticleCard.vue';
import HotTopicCard from 'src/components/HotTopicCard.vue';
import HotUserCard from 'src/components/HotUserCard.vue';
import HotTagCard from 'src/components/HotTagCard.vue';
import SuspensionBtn from 'src/components/SuspensionBtn.vue';
import HomePanel from './HomePanel.vue';
import FollowPanel from './FollowPanel.vue';
import { useWebStore } from 'src/stores/webStore';
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const webStore = useWebStore();
const { topVal, isLogin } = storeToRefs(webStore);
const route = useRoute();
const props = withDefaults(
  defineProps<{
    pTab: string;
  }>(),
  { pTab: '' },
);

const mainTab = ref('home');

watch(
  () => props.pTab,
  (pTab) => {
    if (pTab) {
      mainTab.value = pTab;
    } else {
      mainTab.value = 'home';
    }
  },
);

onMounted(() => {
  if (props.pTab) {
    mainTab.value = props.pTab;
  } else {
    mainTab.value = 'home';
  }
});
</script>
<style lang="scss" scoped></style>
